import {
    AlipayCircleOutlined,
    LockOutlined,
    MobileOutlined,
    TaobaoCircleOutlined,
    UserOutlined,
    WeiboCircleOutlined,
} from '@ant-design/icons';
import {
    LoginForm,
    ProConfigProvider,
    ProFormCaptcha,
    ProFormCheckbox,
    ProFormText,
    setAlpha,
} from '@ant-design/pro-components';
import {useEmotionCss} from '@ant-design/use-emotion-css';
import { Space, Tabs, message, theme } from 'antd';
import type { CSSProperties } from 'react';
import logo from "../../assets/logo1.png"
import loginbg from "../../assets/loginbg.png"
import { useState } from 'react';
import {useNavigate} from "react-router-dom";
const Login = ()=>{
        const { token } = theme.useToken();
      const navigate =  useNavigate()
        const [loginType, setLoginType] = useState('account');

        const iconStyles: CSSProperties = {
            marginInlineStart: '16px',
            color: setAlpha(token.colorTextBase, 0.2),
            fontSize: '24px',
            verticalAlign: 'middle',
            cursor: 'pointer',
        }
    const containerClassName = useEmotionCss(() => {
        return {
            height: '100vh',
            overflow: 'auto',
            backgroundImage: "url("+loginbg+")",
            backgroundSize: '100% 100%',
        };
    });
    //     跳转注册页面
    const  toRegister = ()=>{
        navigate("/register")
    }

    return(
    <ProConfigProvider hashed={false}>
        <div className={containerClassName} style={{
            backgroundColor: token.colorBgContainer ,
        }}>
            <LoginForm
                logo={logo}
                title="无尽Api接口开放平台"
                subTitle="一个为用户和开发者提供全面API接口调用服务的平台"
                actions={
                    <Space>
                        其他登录方式
                        <AlipayCircleOutlined style={iconStyles} />
                        <TaobaoCircleOutlined style={iconStyles} />
                        <WeiboCircleOutlined style={iconStyles} />
                        <a
                            style={{
                                float: 'right',
                            }}
                        >
                            忘记密码?
                        </a>
                    </Space>
                }
            >
                <Tabs
                    centered
                    activeKey={loginType}
                    onChange={(activeKey) => setLoginType(activeKey)}
                >
                    <Tabs.TabPane key={'account'} tab={'账号密码登录'} />
                    <Tabs.TabPane key={'phone'} tab={'手机号登录'} />
                </Tabs>
                {loginType === 'account' && (
                    <>
                        <ProFormText
                            name="username"
                            fieldProps={{
                                size: 'large',
                                prefix: <UserOutlined className={'prefixIcon'} />,
                            }}
                            placeholder={'用户名: admin or user'}
                            rules={[
                                {
                                    required: true,
                                    message: '请输入用户名!',
                                },
                            ]}
                        />
                        <ProFormText.Password
                            name="password"
                            fieldProps={{
                                size: 'large',
                                prefix: <LockOutlined className={'prefixIcon'} />,
                                strengthText:
                                    '密码应包含数字、字母和特殊字符，长度至少为 8 个字符。',

                                statusRender: (value) => {
                                    const getStatus = () => {
                                        if (value && value.length > 12) {
                                            return 'ok';
                                        }
                                        if (value && value.length > 6) {
                                            return 'pass';
                                        }
                                        return 'poor';
                                    };
                                    const status = getStatus();
                                    if (status === 'pass') {
                                        return (
                                            <div style={{ color: token.colorWarning }}>
                                                强度：中
                                            </div>
                                        );
                                    }
                                    if (status === 'ok') {
                                        return (
                                            <div style={{ color: token.colorSuccess }}>
                                                强度：强
                                            </div>
                                        );
                                    }
                                    return (
                                        <div style={{ color: token.colorError }}>强度：弱</div>
                                    );
                                },
                            }}
                            placeholder={'密码: 12345678'}
                            rules={[
                                {
                                    required: true,
                                    message: '请输入密码！',
                                },
                            ]}
                        />
                    </>
                )}
                {loginType === 'phone' && (
                    <>
                        <ProFormText
                            fieldProps={{
                                size: 'large',
                                prefix: <MobileOutlined className={'prefixIcon'} />,
                            }}
                            name="mobile"
                            placeholder={'手机号'}
                            rules={[
                                {
                                    required: true,
                                    message: '请输入手机号！',
                                },
                                {
                                    pattern: /^1\d{10}$/,
                                    message: '手机号格式错误！',
                                },
                            ]}
                        />
                        <ProFormCaptcha
                            fieldProps={{
                                size: 'large',
                                prefix: <LockOutlined className={'prefixIcon'} />,
                            }}
                            captchaProps={{
                                size: 'large',
                            }}
                            placeholder={'请输入验证码'}
                            captchaTextRender={(timing, count) => {
                                if (timing) {
                                    return `${count} ${'获取验证码'}`;
                                }
                                return '获取验证码';
                            }}
                            name="captcha"
                            rules={[
                                {
                                    required: true,
                                    message: '请输入验证码！',
                                },
                            ]}
                            onGetCaptcha={async () => {
                                // eslint-disable-next-line no-undef
                                message.success('获取验证码成功！验证码为：1234');
                            }}
                        />
                    </>
                )}
                <div
                    style={{
                        marginBlockEnd: 24,
                    }}
                >
                    <ProFormCheckbox noStyle name="autoLogin">
                        自动登录
                    </ProFormCheckbox>
                    <a
                        style={{
                            float: 'right',
                        }}
                        onClick={()=>toRegister()}
                    >
                        还没有账号?去注册->
                    </a>

                </div>
            </LoginForm>
        </div>
    </ProConfigProvider>
    )
}
export default Login
